<template>
  <div class="swiper-main">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="">
      </swiper-slide>
    </swiper>
	<div class="swiper-pagination"></div>
  </div>
</template>

<script>
// import { Swiper, SwiperSlide } from 'swiper/vue';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';

	export default {
	  name: 'SwiperComponent',
	  props:{
		swiperList:Array
	  },
	  data() {
	    return {
	    //   swiperList: [
	    //     {
	    //       id: 1,
	    //       imgUrl: './images/b2.jpg'
	    //     },
	    //     {
	    //       id: 2,
	    //       imgUrl: './images/b3.jpg'
	    //     },
	    //     {
	    //       id: 3,
	    //       imgUrl: './images/b1.jpg'
	    //     }
	    //   ],
	      swiperOption: {
	        direction: 'horizontal',
	        autoplay: true,
	        speed: 500,
	        pagination: {
	          el: '.swiper-pagination',
	        }
	      }
	    };
	  },
	  components: {
	    swiper,
	    swiperSlide
	  }
	};
	</script>
	
	<style scoped>
	.swiper-main {
	  position: relative;
	  width: 100%;
	  height: 10.3125rem;
	}
	
	.swiper-wrapper img {
	  width: 100%;
	  height: 10.3125rem;
	}
	
	.swiper-main img {
	  width: 100%;
	  height: 10.3125rem;
	}
	.swiper-pagination{
		width: 100%;
		bottom: 0;
		
	}
	::v-deep .swiper-pagination-bullet-active{
		background-color: green;
	}
	::v-deep .swiper-pagination-bullet{
		margin: 0 0.1875rem;
	}
	</style>

